import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import title from "./../../assets/img/title.png";
import student from "./../../assets/img/student.png";

import couple from "./../../assets/img/couple.png";
import close from "./../../assets/img/close.png";
import "./home.css";

function Home() {
  let navigate = useNavigate();
  let [open, setOpen] = useState(false);
  let [bounce, setBounce] = useState(false);

  function pathSwitch(path) {
    navigate(path);
  }
  function openSub() {
    if (!open) {
      setOpen(true);
    }
  }
  function closeSub() {
    setOpen(false);
  }

  function openSubTab(path) {
    if (open) {
      pathSwitch(`${path}`);
    }
  }

  const openFaceBook = () => {
    window.open(
      "https://www.facebook.com/profile.php?id=61560277477160&mibextid=LQQJ4d"
    );
  };

  useEffect(() => {
    setTimeout(() => {
      setBounce(true);
    }, 4000);
  }, []);

  return (
    <div className={`home-page ${open ? "home-page-sub" : ""}`}>
      <div className={"menu-bg"}></div>
      <div className="btn-page-sub-close" onClick={() => closeSub()}>
        {" "}
        <img className="close" alt="" src={close} />
      </div>
      {/* 云朵 */}
      <div className="cloud cloud-l transition-left"></div>
      <div className="cloud cloud-m transition-top"></div>
      <div className="cloud cloud-r transition-title"></div>
      {/* 蛋 */}
      <div className="page-title">
        {/* 主题 */}
        {<img className="transition-title" alt="" src={title} />}
        <img
          className={`page-egg transition-bottom ${bounce ? "bounce-top" : ""}`}
          alt=""
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/egg_new.png"}
        />
      </div>
      {/* 右下角 */}
      <div className="floor"></div>
      {/* 左下角 */}
      <div className="wave"></div>
      <div className="right-corner">
        <p>
          {" "}
          <img
            className="icon-size"
            alt=""
            onClick={() => openFaceBook()}
            src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/facebook.png"}
          />
        </p>
        <p>Copyright ©️ The University of Hong Kong</p>
      </div>
      {/* 中心 */}
      <div className="main-topic transition-bottom" onClick={() => openSub()}>
        <img
          className="page-slogan"
          alt=""
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/slogan.png"}
          style={{ zIndex: "3", width: "45%", height: "30%" }}
        />
        <div
          className="target target-student"
          onClick={(e) => openSubTab("../DetailStudent?id=1#0")}
        >
          <div className="student-container">
            <img className="student" alt="" src={student} />
            <span className="target-name w-full">&bull; 戴學新 &bull;</span>
          </div>
          <img
            className="student-bg"
            alt=""
            src={
              "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/student_bg.png"
            }
          />
          <div className="target-tip">
            <span>唔係嘛...</span>
            <span>趕快諗,</span>
            <span>生育的問題</span>
          </div>
        </div>
        <div
          className="target target-single"
          onClick={(e) => openSubTab("../SingleRole?id=2#1")}
        >
          <div className="single-container">
            <img
              className="student"
              alt=""
              src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/single.png"}
            />
            <span className="target-name">&bull; 單生仁 &bull;</span>
          </div>
          <img
            className="single-bg"
            alt=""
            src={
              "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/kv%20-%202%20-%20ambition.png"
            }
          />
          <div className="target-tip target-tip-left">
            <span>我好享受現在</span>
            <span>的自由自在</span>
            <span>不想被束縛住!</span>
          </div>
        </div>
        <div
          className="target target-couple"
          onClick={(e) => openSubTab("../DetailCouple?id=3#2")}
        >
          <div className="single-container">
            <img className="student" alt="" src={couple} />
            <span className="target-name">&bull; 連清夫婦 &bull;</span>
          </div>
          <img
            className="single-bg"
            alt=""
            src={
              "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/kv%20-%203%20-%20house.png"
            }
          />
          <div className="target-tip target-tip-left">
            <span>都是時候</span>
            <span>準備生BB啦！</span>
          </div>
        </div>
        <div
          className="target target-infecund"
          onClick={(e) => openSubTab("../Sterile?id=4#3")}
        >
          <div className="single-container">
            <img
              className="student"
              alt=""
              src={
                "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/unpregnant.png"
              }
            />
            <span className="target-name">&bull;畢育夫婦 &bull;</span>
          </div>
          <img
            className="single-bg"
            alt=""
            src={
              "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/kv%20-%204%20-%20tree.png"
            }
          />
          <div className="target-tip  target-tip-left">
            <span>到底是什</span>
            <span>麼問題？</span>
          </div>
        </div>
        <div className="cricle cricle-l"></div>
        <div className="cricle cricle-r"></div>
      </div>
      <div className="foot"></div>
    </div>
  );
}

export default Home;
